<template>

  <div class="container">
    <div class="header">
      <img v-lazy="require('@/assets/logo.png')" />
      <p>user123</p>
    </div>

    <div class="text pad10">
      <div class="text_user">
        <span><van-icon name="user-circle-o" size="20" /></span>
        <input
          type="text"
          placeholder="请输入测试账号user123"
          v-model.trim="username"
        />
      </div>
      <div class="text_pas">
        <span><van-icon name="closed-eye" size="20" /></span>

        <input
          type="text"
          placeholder="请输入测试密码user123"
          v-model.trim="password"
        />
      </div>
    </div>
    <div class="ctn pad10">
      <div class="registered">
        <p>免费注册</p>
        <p>忘记密码</p>
      </div>
      <div>
        <button @click.prevent="goLogin">登录</button>
      </div>
   
    </div>
  </div>
</template>
<script>
import {Toast} from 'vant'
import { loginapi } from "../../assets/api/homeapi.js";
export default {
  data() {
    return {
      username: "user123",
      password: "user123",
    };
  },
  methods: {
    goLogin() {
      let data = {
        username: this.username,
        password: this.password,
      };
      loginapi(data).then(r=>{
        if(r.data.errno == 0){
          localStorage.setItem('token',r.data.data.token)
          this.$router.push('/my')
        }else{
          Toast.fail('密码或用户名错误')
        }
      })
    },
    goreg() {
      this.$router.push("/registered");
    },
  },
};
</script>
<style lang="scss" scoped>
.pad10 {
  padding: 0 10px;
}

.header {
  position: relative;

  height: 150px;

  text-align: center;
  box-sizing: border-box;
}
.header img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #ccc;
  text-align: center;
  margin-top: 30px;
}
.header p {
  font-size: 16px;
  margin-top: 6px;
}
.text {
  text-align: center;
}
input {
  border: none;
}
.text_user,
.text_pas {
  // width: 100%;
  height: 40px;
  // line-height: 30px;
  margin: 10px 0;
  border: 1px solid #ccc;
  background-color: white;
  padding-left: 5px;
}
.text_user span,
.text_pas span {
  display: inline-block;
  width: 30px;
  margin-top: 10px;
}
.ctn {
  margin-top: 15px;
}
.registered {
  display: flex;
  justify-content: space-between;
}
button {
  height: 50px;
  width: 100%;
  background-color: red;
  margin-top: 20px;
  color: white;
}
</style>